import Strings from '@/i18n';
import { View, Image, Text, Button } from '@ray-js/ray';
import React from 'react';
import styles from './index.module.less';
import noData from './noData.png';

export const Empty = ({ handleAddTiming }: { handleAddTiming: () => void }) => {
  return (
    <View
      style={{
        height: '90vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
      }}
    >
      <View className={styles.noDataBox}>
        <Image src={noData} className={styles.notDataImage} />
        <Text
          style={{
            color: '#999',
            fontSize: '14px',
          }}
        >
          {Strings.getLang('noData')}
        </Text>
      </View>
      <Button onClick={handleAddTiming} className={styles.addBtn}>
        {Strings.getLang('add')}
      </Button>
    </View>
  );
};
